//生成验证码的函数
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d");
var flush = document.querySelector(".flush a");
var _text;
num ();
function num (){
	// 获取一个四位随机数
	var str = "abcdefghijkmnpqrstuvwxyzABCDEFGHIJKMNPQRSTUVWXYZ123456789";
	var a = str[parseInt(Math.random()*str.length)]
	var b = str[parseInt(Math.random()*str.length)]
	var c = str[parseInt(Math.random()*str.length)]
	var d = str[parseInt(Math.random()*str.length)]
	//渐变的随机数
	var colorRand1 = Math.random();
	var colorRand2 = Math.random();
	var colorRand3 = Math.random();
	var colorRand4 = Math.random();
	//随机颜色
	var color1 ="#"+Math.random().toString(16).substr(-7, 6);
	var color2 ="#"+Math.random().toString(16).substr(-7, 6);
	var color3 ="#"+Math.random().toString(16).substr(-7, 6);
	var color4 ="#"+Math.random().toString(16).substr(-7, 6);
	
	_text = a+b+c+d;
	ctx.font = "50px Arial"
	var gradient = ctx.createLinearGradient(0,0,144,50);
	//渐变色 0.1  black 
	gradient.addColorStop(colorRand1,color1);
	gradient.addColorStop(colorRand2,color2);
	gradient.addColorStop(colorRand3,color3);
	gradient.addColorStop(colorRand4,color4);
	ctx.fillStyle = gradient;//笔触颜色
	ctx.fillText(_text,0,40)
}
//点击验证码刷新按钮刷新验证码
flush.onclick = function(){
	ctx.clearRect(0,0,144,50);
	num ();
}

//通过表单name属性获取表单的属性值
	var regform = document.forms["regform"]; //form表单
	var username = regform.username;		//用户名
	var password = regform.password;		//密码
	var password2 = regform.password2;		//重复密码
	var Email = regform.Email;				//邮箱
	var code = regform.code;			//验证码
	var checkbox = regform.checked		//单选框
	var username_reg = /[a-zA-Z0-9]{6,12}/ //用户名正则；
	var password_reg = /[a-zA-Z0-9]{6,20}/ //密码正则
	var Email_reg = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/ //邮箱正则


/*
 * 点击提交按钮，表单验证的函数
 */	
function checkForm(){
	var status = true;//验证的状态值
	//用户名判断
	if(username.value ==""){
		//请输入用户名
		document.getElementById("errorusername").innerHTML = "<font color='red'>用户名不能为空！</font>";
		status = false;
	}
	else if(!username_reg.test(username.value)){
		//用户名不正确
		document.getElementById("errorusername").innerHTML = "<font color='red'>请输入用户名6-12位用户名</font>";
		status = false;
	}
	else{
		//用户名正确
		document.getElementById("errorusername").innerHTML = "<font color='green'>√√√</font>";
	}
	
	//密码判断
	if(password.value ==""){
		//请输入密码
		document.getElementById("errorpassword").innerHTML = "<font color='red'>密码不能为空！</font>";
		status = false;
	} 
	else if(!password_reg.test(password.value)){
		//请输入密码
		document.getElementById("errorpassword").innerHTML = "<font color='red'>密码格式错误！</font>";
		status = false;
	}	
	else{
		document.getElementById("errorpassword").innerHTML = "<font color='green'>√√√</font>";
	}
	//重复密码判断
	if(password2.value ==""){
		//确认密码不能为空
		document.getElementById("errorpassword2").innerHTML = "<font color='red'>确认密码不能为空！</font>";
		status = false;
	}
	else if(password2.value != password.value){
		document.getElementById("errorpassword2").innerHTML = "<font color='red'>两次密码输入不一致！</font>";
		status = false;
	}
	else {
		document.getElementById("errorpassword2").innerHTML = "<font color='green'>√√√</font>";
	}
	//邮箱格式验证
	if(Email.value ==""){
		//邮箱不能为空
		document.getElementById("errorEmail").innerHTML = "<font color='red'>邮箱不能为空！</font>";
		status = false;
	}
	else if(!Email_reg.test(Email.value)){
		document.getElementById("errorEmail").innerHTML = "<font color='red'>邮箱格式不正确！</font>";
		status = false;
	}
	else {
		document.getElementById("errorEmail").innerHTML = "<font color='green'>√√√</font>";
	}
	//验证码验证
	if(code.value ==""){
		document.getElementById("errorcode").innerHTML = "<font color='red'>验证码不能为空！</font>";
		status = false;
	}
	else if(code.value.toUpperCase()!= _text.toUpperCase()){
		document.getElementById("errorcode").innerHTML = "<font color='red'>验证码错误！</font>";
		status=false;
	}
	else {
		document.getElementById("errorcode").innerHTML = "<font color='green'>√√√</font>";
	}
	//注册协议
	if(checkbox.checked == false){
		document.getElementById("errorcheckbox").innerHTML = "<font color='red'>请仔细阅读并确认注册协议！</font>";
		status = false;
	}
	else if(checkbox.checked){
		document.getElementById("errorcheckbox").innerHTML = "";
	}
	return status;
}

//表单的焦点事件
//用户名焦点事件
username.onfocus = function(){
	document.getElementById("errorusername").innerHTML = "<font>账户名是您以后登录所用的账号，可以由字母a-z或数字组成。</font>";
	document.querySelector(".user").style.borderColor = "#6ecf9a";
}
//用户名失去焦点事件
username.onblur = function(){
	if(!username_reg.test(username.value)){
		//用户名不正确
		document.getElementById("errorusername").innerHTML = "<font color='red'>请输入6-12由字母a-z或数字组成的用户名</font>";
		document.querySelector(".user").style.borderColor = "#CF0B0F";
	}
	else{
		//用户名正确
		document.getElementById("errorusername").innerHTML = "<font color='green'>√√√</font>";
		document.querySelector(".user").style.borderColor = "";
	}
}

//密码的焦点事件
password.onfocus = function(){
	document.getElementById("errorpassword").innerHTML = "<font>6-20位字符，密码由字母a-z及数字组成。</font>";
	document.querySelector(".passworld").style.borderColor = "#6ecf9a";
}
//密码失去焦点事件
password.onblur = function(){
	if(!password_reg.test(password.value)){
		document.getElementById("errorpassword").innerHTML = "<font color='red'>密码格式错误</font>";
		document.querySelector(".passworld").style.borderColor = "#CF0B0F";
	}
	else{
		document.getElementById("errorpassword").innerHTML = "<font color='green'>√√√</font>";
		document.querySelector(".passworld").style.borderColor = "";
	}
	if(password2.value != ""){
		if(password.value != password2.value){
			document.getElementById("errorpassword").innerHTML = "<font color='red'>两次输入密码不一致</font>";
			document.querySelector(".passworld").style.borderColor = "#CF0B0F";
		}
	}	
}
//重复密码的焦点事件
password2.onfocus = function(){
	document.getElementById("errorpassword2").innerHTML = "<font>请再输入一次密码</font>";
	document.querySelector(".passworld2").style.borderColor = "#6ecf9a";
}
//重复密码的失去焦点事件
password2.onblur = function(){
		if(password2.value == ""){
			document.getElementById("errorpassword2").innerHTML = "<font color='red'>确认密码不能为空</font>";
			document.querySelector(".passworld2").style.borderColor = "#CF0B0F";
		}
		else if(password.value != password2.value){
			document.getElementById("errorpassword2").innerHTML = "<font color='red'>两次密码不一致</font>";
			document.querySelector(".passworld2").style.borderColor = "#CF0B0F";
		}
		else if(!password_reg.test(password2.value)){
			document.getElementById("errorpassword2").innerHTML = "<font color='red'>密码格式错误</font>";
			document.querySelector(".passworld2").style.borderColor = "#CF0B0F";
		}
		else{
			document.getElementById("errorpassword2").innerHTML = "<font color='green'>√√√</font>";
			document.querySelector(".passworld2").style.borderColor = "";
		}
		if(password.value == password2.value){
			document.getElementById("errorpassword").innerHTML = "<font color='green'>√√√</font>";
			document.querySelector(".passworld	").style.borderColor = "";
		}
}
//邮箱的焦点事件
Email.onfocus = function(){
	document.getElementById("errorEmail").innerHTML = "<font>请输入您的电子邮箱，建议使用常用邮箱</font>";
	document.querySelector(".verify-email").style.borderColor = "#6ecf9a";
}
//邮箱的失去焦点事件
Email.onblur = function(){
	if(Email.value ==""){
		//邮箱不能为空
		document.getElementById("errorEmail").innerHTML = "<font color='red'>邮箱不能为空！</font>";
		document.querySelector(".verify-email").style.borderColor = "#CF0B0F";
	}
	else if(!Email_reg.test(Email.value)){
		document.getElementById("errorEmail").innerHTML = "<font color='red'>邮箱格式不正确！</font>";
		document.querySelector(".verify-email").style.borderColor = "#CF0B0F";
	}
	else {
		document.getElementById("errorEmail").innerHTML = "<font color='green'>√√√</font>";
		document.querySelector(".verify-email").style.borderColor = "";
	}
}
//验证码的焦点事件
code.onfocus = function(){
	document.getElementById("errorcode").innerHTML = "<font>请输入验证码</font>";
	document.querySelector(".verify-num").style.borderColor = "#6ecf9a";
}
//验证码失去焦点事件
code.onblur = function(){
	if(code.value ==""){
		document.getElementById("errorcode").innerHTML = "<font color='red'>验证码不能为空！</font>";
		document.querySelector(".verify-num").style.borderColor = "#CF0B0F";
	}
	else if(code.value.toUpperCase()!= _text.toUpperCase()){
		document.getElementById("errorcode").innerHTML = "<font color='red'>验证码错误！</font>";
		document.querySelector(".verify-num").style.borderColor = "#CF0B0F";
	}
	else {
		document.getElementById("errorcode").innerHTML = "<font color='green'>√√√</font>";
		document.querySelector(".verify-num").style.borderColor = "";
	}
}

//选项卡单击事件
//获取email和phone
var email = document.querySelector(".center-content .email");
var phone = document.querySelector(".center-content .phone");
email.onclick = function(){
	email.classList.add ("active");
	phone.classList.remove("active")
}
phone.onclick = function(){
	phone.classList.add( "active")
	email.classList.remove("active")	
}
